<template>
  <a-form-item v-bind="validateInfos.mobile">
    <a-input
      size="large"
      type="text"
      placeholder="手机号"
      v-model:value="modelRef.mobile"
    >
      <template v-slot:prefix
        ><MobileOutlined :style="iconColorStyle"
      /></template>
    </a-input>
  </a-form-item>

  <a-row :gutter="16">
    <a-col :span="16">
      <a-form-item v-bind="validateInfos.code">
        <a-input
          size="large"
          type="text"
          placeholder="验证码"
          v-model:value="modelRef.code"
        >
          <template v-slot:prefix
            ><MailOutlined :style="iconColorStyle"
          /></template>
        </a-input>
      </a-form-item>
    </a-col>
    <a-col :span="8">
      <a-button
        class="get_captcha"
        tabindex="-1"
        :disabled="state.smsSendBtn"
        @click="getCaptcha()"
        v-text="(!state.smsSendBtn && '获取验证码') || state.time + ' s'"
      ></a-button>
    </a-col>
  </a-row>
</template>
<script lang="ts">
import { useForm } from "@ant-design-vue/use";
import { MobileOutlined, MailOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, toRaw } from "vue";
import { mobileCaptchaReq } from "@/api/Admin/Mobile";
import { validationRule } from "@/utils/Validation/rules";
import { useStore } from "@/store";
import { ActionTypes } from "@/store/modules/user/action-types";
const LoginMobile = defineComponent({
  components: {
    MobileOutlined,
    MailOutlined,
  },
  setup() {
    // reactive
    const modelRef = reactive({
      mobile: "",
      code: "",
    });
    const rulesRef = reactive({
      mobile: [
        {
          required: true,
          message: "请输入手机号",
        },
        {
          pattern: validationRule.Phone,
          message: "请输入正确的手机号",
        },
      ],
      code: [
        {
          required: true,
          message: "请输入验证码",
        },
      ],
    });
    const state = reactive({
      time: 60,
      loginBtn: false,
      loginType: 0,
      smsSendBtn: false,
    });
    // use
    const { validate, validateInfos, resetFields } = useForm(
      modelRef,
      rulesRef,
    );
    // methods
    const getCaptcha = async () => {
      state.smsSendBtn = !state.smsSendBtn;
      // try {
      //   await validate(["mobile"]);
      // const interval = setInterval(() => {
      //   if (state.time-- <= 0) {
      //     state.time = 60;
      //     state.smsSendBtn = false;
      //     clearInterval(interval);
      //   }
      // }, 1000);
      // try {
      //   const { data } = await mobileCaptchaReq(modelRef.mobile);
      //   if (data) {
      //     console.log("短信发送成功");
      //   }
      // } catch (error) {
      //   clearInterval(interval);
      //   state.time = 60;
      //   state.smsSendBtn = false;
      // }
      // } catch (err) {
      //   console.log("error", err);
      // }
    };
    const submitForm = () => {
      validate()
        .then(() => {
          const data = toRaw(modelRef);
          // TODO: https://blog.logrocket.com/whats-new-in-vuex-4/
          const store = useStore();
          store.dispatch(ActionTypes.LOGIN_USER_SMS, data);
        })
        .catch(err => {
          console.log("error", err);
        });
    };
    // return
    return {
      // const
      iconColorStyle: { color: "rgba(0,0,0,.25)" },
      // reactive
      validateInfos,
      modelRef,
      state,
      // methods
      getCaptcha,
      submitForm,
      resetFields,
    };
  },
});
export default LoginMobile;
export type LoginMobileRefs = InstanceType<typeof LoginMobile>;
</script>
<style lang="less" scoped>
.get_captcha {
  display: block;
  width: 100%;
  height: 40px;
}
</style>